<template>
  <div style="font-size: 13px">
    <div class="edit_item">
      <div style="overflow: hidden">
        <div style="float: left">
          <span class="icon-fanhui go_back" @click="goBack"></span>
          <span class="edit_title">订单信息</span>
        </div>
        <div style="float: right">
          <el-button @click="openDialog" size="small" v-if="jurisdiction.order_edit">编辑</el-button>
          <el-button size="small" @click="deletetDialog = true" v-if="jurisdiction.order_delete">删除</el-button>
          <el-button size="small" @click="exportExcel" v-if="jurisdiction.order_export">导出</el-button>
        </div>

        <exportDialog :visible="exportVisible"  @close="closeDia" :excelId="orderId" v-if="exportDialog"></exportDialog>



      </div>
      <el-row :gutter="20" style="padding: 10px 40px">
        <el-col :span="12"><div class="grid_item">
          <div>
            <span class="label_item">订单编号：</span>
          </div>
          <div class="label_text">
            {{form.orderNo}}
          </div>
        </div></el-col>
        <el-col :span="12"><div class="grid_item">
          <div>
            <span class="label_item">订单名称：</span>
          </div>
          <div class="label_text">
            {{form.orderName}}
          </div>
        </div></el-col>
        <el-col :span="12"><div class="grid_item">
          <div>
            <span class="label_item">订单状态：</span>
          </div>
          <div class="label_text">
            {{form.orderStatusName}}
          </div>
        </div></el-col>
        <el-col :span="12"><div class="grid_item">
          <div>
            <span class="label_item">下单时间：</span>
          </div>
          <div class="label_text">
            {{form.createTime}}
          </div>
        </div></el-col>
        <el-col :span="12"><div class="grid_item">
          <div>
            <span class="label_item">币种：</span>
          </div>
          <div class="label_text">
            {{form.currencyEname}}
          </div>
        </div></el-col>
        <el-col :span="12"><div class="grid_item">
          <div>
            <span class="label_item">订单金额：</span>
          </div>
          <div class="label_text">
            {{form.orderAmount}}
          </div>
        </div></el-col>
        <el-col :span="12"><div class="grid_item">
          <div>
            <span class="label_item">客户：</span>
          </div>
          <div class="label_text">
            <span style="color:#2A97F9;cursor:pointer;"  @click="toCustDetail(form.custId, form.isEdit, form.custState)">{{form.custName}}</span>
          </div>
        </div></el-col>
        <el-col :span="12"><div class="grid_item">

          <div>
            <span class="label_item">联系人：</span>
          </div>
          <div class="label_text">
            <span style="color:#2A97F9;cursor:pointer;"  @click="toCustDetail(form.custId, form.isEdit, form.custState)">{{form.linkerNames}}</span>
          </div>

        </div></el-col>
        <el-col :span="12"><div class="grid_item">
          <div>
            <span class="label_item">业绩归属人：</span>
          </div>
          <div class="label_text">
            {{form.occupantNames}}
          </div>
        </div></el-col>
        <el-col :span="12"><div class="grid_item">
          <div>
            <span class="label_item">结单日期：</span>
          </div>
          <div class="label_text">
            {{form.statementDate}}
          </div>
        </div></el-col>
        <el-col :span="24"><div class="grid_item">
          <div>
            <span class="label_item">备注：</span>
          </div>
          <div class="label_text">
            {{form.remarks}}
          </div>
        </div></el-col>
      </el-row>
      <editOrder :visible="orderVisible" title="编辑订单" @closeOrder="closeEditOrder" :order="orderId" v-if="orderShow && jurisdiction.order_proEdit"></editOrder>

      <!--  删除订单  -->
      <el-dialog :close-on-click-modal="false" :close-on-press-escape	='false'
        :visible.sync="deletetDialog"
        width="30%"
        append-to-body
        center
        style="font-size: 13px">
        <span slot="title" class="dialog-title">删除订单提醒</span>
        <p style="text-align: center">确定将 {{form.orderName}} 永久删除吗？</p>
        <span slot="footer" class="dialog-footer">
        <el-button @click="deletetDialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="deletePro" size="small">确 定</el-button>
      </span>
      </el-dialog>

    </div>
    <div class="edit_footer">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="交易产品" name="product">
          <div class="btns">
            <el-button size="small" v-if="editTable && jurisdiction.order_move" @click="openVis">移除</el-button>
            <el-button size="small" v-if="editTable && jurisdiction.order_batch" @click="openPrice" style="margin-right: 10px">批量改价</el-button>
            <!--   添加产品   -->
            <add-product @updateOrder="updateOrder" :orderId="orderId" :custId="form.custId" :linkerIds="form.linkerIds" :rate="form.currencyRate"></add-product>

            <el-button size="small" @click="editTableList" v-if="tableData != undefined && tableData.length > 0 && !editTable && jurisdiction.order_proEdit" style="margin-right: 10px">编辑产品</el-button>
          </div>
          <el-table
            type="hidden"
            name="flag"
            :show-overflow-tooltip="true"
            :data="tableData"
            @selection-change="changePro"
            style="width: 100%">
            <el-table-column
              type="selection"
              fixed
              width="45">
            </el-table-column>
            <el-table-column
              type="index"
              fixed
              label="序号"
              :index="indexMethod">
            </el-table-column>
            <el-table-column
              prop="productCode"
              :show-overflow-tooltip="true"
              label="产品编号">
            </el-table-column>
            <el-table-column
              label="图片">
              <template slot-scope="scope">
                <img :src="scope.row.defaultPicUrl" class="product_img"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="productEname"
              :show-overflow-tooltip="true"
              label="英文名称">
            </el-table-column>
            <el-table-column
              prop="productTypeName"
              :show-overflow-tooltip="true"
              label="产品类型">
            </el-table-column>
            <el-table-column
              width="110">

              <template slot="header" slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="`自动同步该商品的含税成本价并自动换算成${form.currencyEname}对应的金额`" placement="top">
                  <span>含税成本价
                    <i class="el-icon-question"></i>
                  </span>
                </el-tooltip>
              </template>

              <template slot-scope="scope">
                <template v-if="!editTable">
                  <span>{{scope.row.costPrice}}</span>
                </template>
                <template v-else>
                  <el-input v-model="scope.row.costPrice" size="small" class="number" type="number"></el-input>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="offshorePrice"
              label="离岸价">
            </el-table-column>
            <el-table-column
              prop="unitPrice"
              width="100"
              label="单价">

              <template slot="header" slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="`自动同步该商品的单价并自动换算成${form.currencyEname}对应的金额`" placement="top">
                  <span>单价
                    <i class="el-icon-question"></i>
                  </span>
                </el-tooltip>
              </template>


              <template slot-scope="scope">
                <template v-if="!editTable">
                  <span>{{scope.row.unitPrice}}</span>
                </template>
                <template v-else>
                  <el-input v-model="scope.row.unitPrice" size="small" class="number" type="number"></el-input>
                </template>
              </template>
            </el-table-column>

            <el-table-column
              prop="grossMargin"
              width="100">

              <template slot="header" slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="毛利润率 = (单价 - 含税成本价) / 单价" placement="top">
                  <span>毛利润率
                    <i class="el-icon-question"></i>
                  </span>
                </el-tooltip>
              </template>
            </el-table-column>

              <el-table-column
                width="110"
                label="数量">
                <template slot-scope="scope">
                  <template v-if="!editTable">
                    <span>{{scope.row.prductCount}}</span>
                  </template>
                  <template v-else>
                    <div class="input_num">
                      <el-input-number :min="1" v-model="scope.row.prductCount" size="small" class="input-number"></el-input-number>
                    </div>
                  </template>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="其他费用">
                <template slot-scope="scope">
                  <template v-if="!editTable">
                    <span>{{scope.row.otherFee}}</span>
                  </template>
                  <template v-else>
                    <el-input v-model="scope.row.otherFee" size="small" class="number" type="number"></el-input>
                  </template>
                </template>
              </el-table-column>
              <el-table-column
                prop="packingUnitName"
                width="110"
                label="计量单位">
                <template slot-scope="scope">
                  <template v-if="!editTable">
                    <span>{{scope.row.productUnitName}}</span>
                  </template>
                  <template v-else>
                    <el-select v-model="scope.row.productUnit" placeholder="请选择" size="small">
                      <el-option
                        v-for="item in packageUnitOptions"
                        :key="item.dictKey"
                        :label="item.dictValue"
                        :value="item.dictKey">
                      </el-option>
                    </el-select>
                  </template>
                </template>

              </el-table-column>
              <el-table-column
                width="110"
                label="包装单位">

                <template slot-scope="scope">
                  <template v-if="!editTable">
                    <span>{{scope.row.packingUnitName}}</span>
                  </template>
                  <template v-else>
                    <el-select v-model="scope.row.packingUnit" no-data-text="暂无匹配数据" placeholder="请选择" size="small">
                      <el-option
                        v-for="item in packageUnitOptions"
                        :key="item.dictKey"
                        :label="item.dictValue"
                        :value="item.dictKey">
                        <span slot="empty">暂无匹配数据</span>
                      </el-option>
                    </el-select>
                  </template>
                </template>

              </el-table-column>
              <el-table-column
                width="90"
                label="包装产品数">
                <template slot-scope="scope">
                  <template v-if="!editTable">
                    <span>{{scope.row.packageNumber}}</span>
                  </template>
                  <template v-else>
                  <el-input v-model="scope.row.packageNumber" size="small" type="number" class="number"></el-input>
                  </template>
                </template>

              </el-table-column>
              <el-table-column
                width="95"
                label="包装体积">
                  <template slot-scope="scope">
                    <template v-if="!editTable">
                      <span>{{scope.row.volumeNum}}{{scope.row.volumeNumUnitName}}</span>
                    </template>
                    <template v-else>
                      <el-input v-model="scope.row.volumeNum" size="small" class="number" type="number"></el-input>
                    </template>
                  </template>
              </el-table-column>
              <el-table-column
                prop="packagingVolumeSubtotal"
                width="125"
                label="包装体积小计">
                <template slot="header" slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="包装体积小计 =(数量/每包装产品数) * 包装体积" placement="top">
                  <span>包装体积小计
                    <i class="el-icon-question"></i>
                  </span>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  {{scope.row.packagingVolumeSubtotal}}{{scope.row.volumeNumUnitName}}
                </template>
              </el-table-column>
              <el-table-column
                prop="packagingGrossWeight"
                width="90"
                label="包装毛重">

                <template slot-scope="scope">
                  <template v-if="!editTable">
                    <span>{{scope.row.packagingGrossWeight}}{{scope.row.packagingGrossWeightUNitName}}</span>
                  </template>
                  <template v-else>
                    <el-input v-model="scope.row.packagingGrossWeight" size="small" type="number" class="number" ></el-input>
                  </template>
                </template>

              </el-table-column>
              <el-table-column
                prop="packagingGrossWeightSubTotal"
                width="125"
                label="包装毛重小计">
                <template slot="header" slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="包装毛重小计 = (数量/每包装产品数) * 包装毛重" placement="top">
                  <span>包装毛重小计
                    <i class="el-icon-question"></i>
                  </span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="amount"
                width="95"
                label="金额小计">

                <template slot="header" slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="金额小计 = 单价*数量+其他费用" placement="top">
                  <span>金额小计
                    <i class="el-icon-question"></i>
                  </span>
                  </el-tooltip>
                </template>
              </el-table-column>

            <div slot="empty" style="width: 100%;text-align: left">
              <div>
                <img :src="empty" alt="" style="width: 250px" />
              </div>
            </div>

          </el-table>
          <div class="table_footer">
            <div v-if="tableData != undefined && tableData.length > 0">
              <span style="margin-right: 20px">产品总数量：<span style="color:#2A97F9">{{productNumber}}</span></span>
              <span>产品总金额：<span style="color:#2A97F9"> {{form.currencyEname}} {{productPrice.toFixed(2)}}</span></span>
            </div>
            <div v-if="editTable">
              <el-button type="primary" plain size="small" @click="canCelEditTable">取 消</el-button>
              <el-button type="primary" size="small" @click="submit">保 存</el-button>
            </div>
          </div>
        <!--   移除产品提醒  -->
          <el-dialog
            :visible.sync="dialogVisible"
            center :close-on-click-modal="false" :close-on-press-escape	='false'
            width="450px">
            <span slot="title" class="dialog-title">移除产品提醒</span>
            <p style="text-align: center">您确定要移除所选的产品吗？</p>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" size="small">取 消</el-button>
              <el-button type="primary" @click="deleteProduct" size="small">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 批量改价格  -->
          <el-dialog
            :visible.sync="priceDialog"
            center :close-on-click-modal="false" :close-on-press-escape	='false'
            width="480px">
            <span slot="title" class="dialog-title">批量改单价</span>
            <div class="item_label">
              <span class="dia_label">调价模式：</span>
              <el-select v-model="priceType" placeholder="请选择" size="small">
                <el-option
                  v-for="item in priceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="item_label">
              <span class="dia_label">值：</span>
              <el-input v-model="priceVal" placeholder="请输入内容" size="small" style="width: 200px" @keyup.native="vePrice"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="priceDialog = false" size="small">取 消</el-button>
              <el-button type="primary" @click="changeprice" size="small">确 定</el-button>
            </span>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="贸易信息" name="trade">
        <trade :orderId="orderId" v-if="trade_show" @updateParent="updateData"></trade>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
    import {getDictory} from '@/util/util'
    import {orderDetail, deleteOrder, saveOrderProduct} from '@/api/order'
    import {mapState, mapGetters} from 'vuex'
    import trade from '@/components/order/trade'
    import addProduct from '@/components/order/addProduct'
    import editOrder from '@/components/order/editOrder'
    import exportDialog from '@/components/order/export'

  export default {
        name: "detail",
        components: {
            addProduct,
            editOrder,
            trade,
            exportDialog
        },
        data() {
            return{
                empty:'./img/empty.png',
                cnPic:'./img/cn_abbreviation.png',
                enPic:'./img/en_abbreviation.png',
                jurisdiction:{}, // 权限集合
                form: {},
                orderId: '', // 当前订单id
                orderVisible: false, // 编辑组件显示
                orderShow: false, // 组件加载
                deletetDialog: false, // 删除订单
                tableData: [], // 产品数据
                activeName: 'product',
                editTable: false,
                flag: '',
                dialogVisible: false, // 移除提醒dialog
                productNumber: 0, // 产品总数量
                productPrice: 0, // 产品总金额
                checkData: [], // 选中的数据
                priceDialog: false, // 批量改价
                priceType: 1, // 批量修改的类型
                priceOptions: [
                    {
                        value: 1,
                        label: '固定值'
                    },
                    {
                        value: 2,
                        label: '增加（%）'
                    },
                    {
                        value: 3,
                        label: '下降（%）'
                    },
                    {
                        value: 4,
                        label: '增加'
                    },
                    {
                        value: 5,
                        label: '下降'
                    },
                ], // 批量修改集合
                priceVal: '', // 批量修改值
                trade_show:false,
                exportDialog:false,
                excelId:'', // excel的id
                waitList: [], // 等待修改List
                options:[],
                volumeOptions:[],
                packageUnitOptions: [],
                exportVisible:false
            }
        },
        created() {
            this.jurisdiction = this.vaildData(this.permission)
            this.orderId = this.$route.params.id
            this.init()
        },
      computed:{
          ...mapState(['common']),
          ...mapGetters(["permission"]),
      },
      mounted() {
        this.flag = 0
        // 体积volume  重量weight 包装（数量）单位package_unit
        this.packageUnitOptions = getDictory('package_unit').children;
      },
        methods: {
            init() {
                orderDetail(this.orderId).then(res => {
                    this.form = res.data.data
                    this.tableData = res.data.data.productListDtos
                })
            },
            closeDia() {
                this.exportVisible = false
                this.exportDialog = false
            },
            updateData() { // 贸易信息改变，更新数据
                this.init()
            },
            getSelect(param) {
                this.formSpec.weightUnit = param.val;
            },
            expNum(value, index,type) {
                console.log(value, index, type)
            },
            toCustDetail(id, ispublic, type) {
                if(type == -1) { // 已删除
                    this.$message({
                        message:'此客户已被删除',
                        type:'error'
                    })
                } else { // 未删除，跳转
                    if(!ispublic) {
                        this.$router.push(`/customer/commonDetail/${id}`)

                    } else {
                        this.$router.push(`/customer/myDetail/${id}`)
                    }
                }
            },

            goBack() { // 返回上一级
                this.$router.go(-1)
            },
            exportExcel() { // 导出
                this.exportVisible = true
                this.exportDialog = true
            },
            indexMethod(index) {
                return index +1
            },
            openDialog() {
                this.orderShow = true
                this.orderVisible = true
            },
            closeEditOrder(value) { // 关闭订单编辑
                this.orderShow = false
                this.orderVisible = false
                if(value) {
                    this.init()
                  }
            },
            deletePro() { // 删除订单
                deleteOrder(this.orderId).then(res => {
                    if(res.data.success) {
                        this.$message({
                            type:'success',
                            message:res.data.msg
                        })
                        this.$router.go(-1)
                        this.bus.$emit('updataOrderMenu')
                    }
                })
            },
            changePro(selection) { // 选中订单
                this.checkData = selection
            },
            editTableList() { // 编辑产品
                this.waitList = JSON.parse(JSON.stringify(this.tableData))
                this.editTable = true
            },
            canCelEditTable() {
                this.init()
                this.editTable = false
            },
            openVis() { // 打开移除弹框
                if(this.checkData.length == 0) {
                    this.$message({
                        type:'warning',
                        message: '请选择要移除的产品'
                    })
                } else {
                    this.dialogVisible = true
                }
            },
            openPrice() {
                if(this.checkData.length == 0) {
                    this.$message({
                        type:'warning',
                        message: '请选择要修改的产品'
                    })
                } else {
                    this.priceDialog = true
                }
            },
            vePrice() { // 验证修改的量
                var str = this.priceVal
                var len1 = str.substr(0, 1);
                var len2 = str.substr(1, 1);
                //如果第一位是0，第二位不是点，就用数字把点替换掉
                if (str.length > 1 && len1 == 0 && len2 != ".") {
                    str = str.substr(1, 1);
                }
                //第一位不能是.
                if (len1 == ".") {
                    str = "";
                }
                //限制只能输入一个小数点
                if (str.indexOf(".") != -1) {
                    var str_ = str.substr(str.indexOf(".") + 1);
                    if (str_.indexOf(".") != -1) {
                        str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
                    }
                }
                //正则替换，保留数字和小数点
                str = str.replace(/[^\d^\.]+/g,'')
                // //如果需要保留小数点后两位，则用下面公式
                // str = str.replace(/\.\d\d$/,'')
                this.priceVal = str
            },
            deleteProduct() { // 移除订单
                if(this.checkData.length == 0) {
                    this.$message({
                        type:'warning',
                        message: '请选择要移除的产品'
                    })
                } else {
                    this.checkData.forEach((value) => {
                        this.tableData.forEach((item, index) => {
                            if(value == item) {
                                this.tableData.splice(index, 1)
                            }
                        })
                        this.dialogVisible = false
                    })
                }
            },
            changeprice() { // 批量改价
                if(this.priceVal == '') {
                    this.$message({
                        type:'waring',
                        message:'请输入需要修改的值'
                    })
                } else {
                    this.checkData.forEach((item) => {
                        this.tableData.forEach((value) => {
                            if (item == value) {
                                switch (this.priceType) {
                                    case 1: // 固定值
                                        value.unitPrice = Number(this.priceVal)
                                        break;
                                    case 2: // 上移%
                                        value.unitPrice =  Number(value.unitPrice) * (1 + Number(this.priceVal) / 100)
                                        break;
                                    case 3: // 下移 %
                                        value.unitPrice = Number(value.unitPrice) * (1 - Number(this.priceVal)  / 100)
                                        break;
                                    case 4: // 上移
                                        value.unitPrice = Number(value.unitPrice) + Number(this.priceVal)
                                        break;
                                    case 5: // 下移
                                        value.unitPrice = Number(value.unitPrice) - Number(this.priceVal)
                                        break;
                                }
                            }
                        })
                    })
                    this.priceDialog = false
                    this.priceVal = ''
                    this.priceType = 1
                }
            },
            handleClick(tab) {
                if(tab.name == 'trade') {
                    this.trade_show = true
                } else {
                    this.trade_show = false
                }
            },
            updateOrder(poductArr) {
                this.editTable = true
                this.tableData = this.tableData.concat(poductArr)
            },
            submit() { // 保存
                saveOrderProduct(this.orderId, this.productPrice.toFixed(2), this.tableData, this.form.custId, this.form.linkerIds).then(res => {
                  if(res.data.success) {
                      this.init()
                      this.editTable = false
                  }
                })
            },
        },
      watch: {
          tableData: {
              handler:function (value) {
                  this.productNumber = 0
                  this.productPrice = 0
                  value.forEach((item) => {
                      item.packingUnit = Number(item.packingUnit)
                      item.amount = Number((item.unitPrice * item.prductCount).toFixed(2)) + Number(item.otherFee)
                      this.productNumber += Number(item.prductCount)
                      this.productPrice += Number(item.amount)

                      item.costPrice = item.costPrice ? item.costPrice : 1 // 如果含税成本价为空，默认设置为0
                      item.unitPrice = item.unitPrice ? item.unitPrice : 1 // 如果单价为空，默认设置为0

                      // 判空处理 毛利润率
                      if(item.unitPrice!= 0 && item.costPrice != 0) {
                          item.grossMargin = ((Number(item.unitPrice) - Number(item.costPrice)) / item.unitPrice).toFixed(2)
                      } else {
                          item.grossMargin = ''
                      }

                      // 判空处理 包装体积小计
                      if(item.prductCount && item.packageNumber && item.volumeNum) {
                          item.packagingVolumeSubtotal = (Math.ceil(Number(item.prductCount) / Number(item.packageNumber)) * Number(item.volumeNum)).toFixed(2)
                      } else {
                          item.packagingVolumeSubtotal = ''
                      }

                      // 判空处理 包装毛重小计
                      if(item.prductCount && item.packageNumber&& item.packagingGrossWeight) {
                          item.packagingGrossWeightSubTotal = ( Math.ceil(Number(item.prductCount) / Number(item.packageNumber)) * Number(item.packagingGrossWeight)).toFixed(2)
                      } else {
                          item.packagingGrossWeightSubTotal = ''
                      }

                  //  单位转换
                      this.packageUnitOptions.map(key => {
                          if (key.dictKey == item.packingUnit) {
                              this.$set(item, 'packingUnitName', key.dictValue)
                          }

                          if (key.dictKey == item.productUnit) {
                              this.$set(item, 'productUnitName', key.dictValue)
                          }

                      })
                  })

              },
              deep:true
          }
      }
    }
</script>
<style lang="scss">
  .input_num{
    .el-input-number--small {
      width: 100px;
      .el-input-number__increase{
        border-left: 1px solid #DCDFE6 !important;
      }
      .el-input-number{
        width: 100px;
      }

    }
  }
  .number{
    .el-input__inner{
      padding-right: 5px !important;
    }
  }
</style>

<style scoped lang="scss">
  .go_back{
    color: #2A97F9;
    font-size: 22px;
    cursor: pointer;
  }
  .edit_title{
    color: #435B77;
    font-weight: 600;
    font-size: 18px;
    display: inline-block;
    margin-left: 20px;
  }
  .edit_item{
    background-color: white;
    box-sizing: border-box;
  }
  .edit_footer{
    background-color: white;
    border-radius: 20px 20px 0 0;
    padding: 20px 10px;
    margin-top: 20px;
    box-sizing: border-box;
  }
  .grid_item{
    margin-bottom: 20px;
    display: flex;
  }
  .label_item{
    display: inline-block;
    width:auto;
  }
  .btns{
    position: absolute;
    right: 0;
    top: -53px;
  }
  .table_footer{
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
  }
  .product_img{
    height: 40px;
  }
  .dia_label{
    display: inline-block;
    width:70px;
    margin-right: 10px;
  }
  .item_label{
    margin: 10px;
    padding-left: 40px;
  }
  .export_item{
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
  }
  .export_box{
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .template_text{
    margin: 0 5px;
    color: #2A97F9;
    text-decoration: underline;
    cursor: pointer;
  }
  .label_text{
    word-wrap: break-word;
    word-break: normal;
    overflow: hidden;
  }
</style>
